<script setup>
import { ref } from "vue"
let keyword = ref("")

let content = ref("")

let digit = ref("")

setInterval(
  () => {
    console.log("变量的类型：" + typeof(digit.value));
  },
  5000
);
</script>


<template>
  <label for="keyword">
    请输入关键词
    <!-- 实现原理： -->
    <!-- v-model 通过 input 键盘事件实现的 -->
    <!-- .lazy 修饰是通过 change 事件实现的 -->
    <input type="text" name="keyword" id="keyword" v-model.lazy="keyword">
  </label>

  <h2>{{ keyword }}</h2>


  <label for="content">
    请输入内容
    <!-- .trim 的作用删除字符串左右两边的空格 -->
    <input type="text" name="content" id="content" v-model.trim="content">
  </label>

  <h2>{{ content }}</h2>


  <label for="content">
    请输入数字
    <!-- .number 的作用设置内容为 number 类型，并且删除非数字字符 -->
    <input type="text" name="content" id="content" v-model.number="digit">
  </label>

  <h2>{{ digit }}</h2>

  <h2> Hello, World! </h2>
  <h2>&nbsp; &nbsp;&nbsp; Hello, World! &nbsp;</h2>

</template>

<style scoped>
</style>